<md-toolbar class="mat-elevation-z6">
    <h4>{{generalModel.Name}}</h4>
</md-toolbar>

<md-card>
  <md-card-content>
    <h3 i18n="general">General</h3>

    <div fxLayout="row" fxLayout.xs="column">
      <md-input-container fxFlex>
        <input mdInput placeholder="ID" disabled [(ngModel)]="generalModel.Id">
        <button md-icon-button mdSuffix i18n-title="copy" title="Copy" (click)="onCopyId()">
          <md-icon>content_copy</md-icon>
        </button>
      </md-input-container>
      <md-input-container fxFlex>
        <input mdInput i18n-placeholder="name" placeholder="Name" [(ngModel)]="generalModel.Name">
        
        <button md-icon-button i18n-title="update" title="Update" mdSuffix (click)="onRename()">
          <md-icon>update</md-icon>
        </button>
      </md-input-container>
    </div>

    <!-- environment -->
    <h3>Environment</h3>
    <div fxLayout="row" fxLayout.xs="column" *ngFor="let item of generalModel.Env; let i = index">
      <md-input-container fxFlex>
        <input mdInput placeholder="KEY" [(ngModel)]="item.Key">
      </md-input-container>

      <div fxFlex>
        <md-input-container style="width: 80%;">
          <input mdInput placeholder="VALUE" [(ngModel)]="item.Value">
        </md-input-container>

        <button md-icon-button i18n-title="close" title="Close" (click)="onClearEnv(i)" *ngIf="generalModel.Env.length > 1 + i">
          <md-icon>clear</md-icon>
        </button>

        <button md-icon-button i18n-title="add" title="Add" (click)="onAddEnv()" *ngIf="generalModel.Env.length == (i + 1)">
          <md-icon>add</md-icon>
        </button>
      </div>

    </div>

  </md-card-content>
</md-card>

<!-- Ports -->
<md-card>
  <md-card-content>
    <h3 i18n="port">Ports</h3>

    <div fxLayout="row" fxLayout.xs="column" *ngFor="let item of portsModel; let i = index">
      <md-input-container fxFlex>
        <input mdInput placeholder="Docker Port" [(ngModel)]="item.DockerPort">
      </md-input-container>

      <div fxFlex>
        <md-input-container>
          <input mdInput placeholder="Publish Port" [(ngModel)]="item.HostPort">
        </md-input-container>

        <md-radio-group [(ngModel)]="item.Type">
          <md-radio-button value="tcp">TCP</md-radio-button>
          <md-radio-button value="udp">UDP</md-radio-button>
        </md-radio-group>

        <button md-icon-button i18n-title="close" title="Close" (click)="onClearPorts(i)" *ngIf="portsModel.length > 1 + i">
          <md-icon>clear</md-icon>
        </button>

        <button md-icon-button i18n-title="add" title="Add" (click)="onAddPorts()" *ngIf="portsModel.length == 1 + i">
          <md-icon>add</md-icon>
        </button>
      </div>
    </div>

  </md-card-content>

</md-card>

<md-card>
  <md-card-content>
    <h3 i18n="volume">Volumes</h3>

    <div fxLayout="row" fxLayout.xs="column" *ngFor="let item of volumesModel; let i = index">
      <md-input-container fxFlex>
        <input mdInput placeholder="Destination" [(ngModel)]="item.Destination">
      </md-input-container>

      <div fxFlex>
        <md-input-container style="width: 80%;">
          <input mdInput placeholder="Source" [(ngModel)]="item.Source">
        </md-input-container>

        <button md-icon-button i18n-title="close" title="Close" (click)="onClearVolumes(i)" *ngIf="volumesModel.length > 1 + i">
          <md-icon>clear</md-icon>
        </button>

        <button md-icon-button i18n-title="add" title="Add" (click)="onAddVolumes()" *ngIf="volumesModel.length == 1 + i">
          <md-icon>add</md-icon>
        </button>
      </div>
    </div>

  </md-card-content>
</md-card>

<md-card>
  <md-card-content>
    <h3 i18n="advanced">Advanced</h3>
    <section>
      <md-checkbox [(ngModel)]="configModel.Tty"> Allocate a TTY for this container </md-checkbox>
    </section>

    <section>
      <md-checkbox [(ngModel)]="configModel.OpenStdin"> Keep STDIN open even if not attached </md-checkbox>
    </section>

  </md-card-content>
</md-card>

<button title="Recreate" i18n-title="recreate" style="position: fixed; z-index: 2; right: 5px; bottom: 10px;" md-mini-fab (click)="onRecreate()">
  <md-icon>cached</md-icon>
</button>
